<script setup lang="ts">
import { useRouter, useRoute } from "vue-router"
import { ref, computed } from "vue"

const router = useRouter()
const route = useRoute()

const menu = ref([
  {
    label: "前期准备",
    path: "base",
    index: "base"
  },
  {
    label: "AI对话",
    path: "talk",
    index: "talk"
  },
  {
    label: "AI生图",
    path: "picture",
    index: "picture"
  },
  {
    label: "AI语音",
    path: "tts",
    index: "tts"
  },
  {
    label: "更多api",
    path: "api",
    index: "api"
  }
])

const onSelect = (e: string) => {
  router.push({ path: `/setting/sdk/${e}` })
}

const active = computed(() => {
  return (route.params.doc || "base") as string
})
</script>

<template>
  <el-menu class="menu" mode="horizontal" @select="onSelect" :default-active="active">
    <el-menu-item class="menu-item" v-for="item in menu" :index="item.index">
      <template #title>{{ item.label }}</template>
    </el-menu-item>
  </el-menu>
</template>

<style lang="scss" scoped>
.menu {
  border: none;
  position: sticky;
}

.menu-item {
  border-radius: 0;
}
</style>
